<template>
<div class="back-div">
    <div class="back">
        <a v-if="!noBack" v-on:click="back" class="back-btn">
            <img src="../../assets/img/back1.png" />
        </a>
            <router-link v-if="hasHome" tag="div" :to="{path:'/'}" class="home">
                <img src="../../assets/img/home-white.png" />
            </router-link>
        <span class="title" :class="{alignLeft : !left}">{{backTitle}}</span>
        <span v-if="rightBtn" @click="rightBtn.cl" class="rightBtn">{{rightBtn.text}}</span>
    </div>
</div>
</template>

<script>
    export default {
        name: 'back',
        props: ["backTitle", "rightBtn", "backFn", "hasHome","noBack", "left"],
        components: {},
        data: function() {
            return {
                title: ''
            }
        },
        methods: {
            back: function() {
                if (this.backFn) {
                    this.backFn()
                } else {
                    if (window.history.length <= 1) {
                        this.$router.push('/');
                    } else {
                        this.$router.back();
                    }

                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .back-div {
        position: relative;
        height: 0.92rem;
        color: white;
        font-size: 0.4rem;
        /* text-align: center; */
        font-weight: bold;
        max-width: 8rem;
    }

    .back {
        max-width: 8rem;
        background: #3271f1;
        height: 0.92rem;
        line-height: 0.92rem;
        position: fixed;
        width: 100%;
        z-index: 100;
        top: 0;
        padding:0 0.3rem;
        box-sizing: border-box;
        /*display: flex;*/
    }

    .back span {
        /*flex: 1;*/
        /*line-height: 4rem;*/
        /*align-items: center;*/
        font-size: 0.35rem;
        font-weight: normal;
    }

    a.back-btn {
        display: inline-block;
        /* position: absolute;
    left: 0; */
        height: 100%;
        /*width: 5.4rem;*/
        text-align: right;
        padding-right: 0.1rem;
        float: left;
    }

    a.back-btn img {
        /* margin-top: 2rem; */
        width: 0.18rem;
        height: 0.3rem;
        vertical-align: middle;
        position: relative;
        top: -2px;
    }

    .rightBtn {
        position: absolute;
        right: 0.24rem;
        height: 100%;
        text-align: center;
        font-size: 0.32rem;
    }

    .title {
        display: inline-block;
        max-width: 58%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 0.92rem;
    }

    .alignLeft {
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
    }

    .home {
        display: inline-block;
        /* position: absolute;
    left: 9rem; */
        float: left;
        margin-right: 0.1rem;
    }

    .home img {
        width: 0.48rem;
        position: relative;
        top: 0.03rem;
    }
</style>
